<template>
  <view class="word-detail-overlay" v-if="isVisible">
    <view class="word-detail-table">
      <!-- 卡片标题栏 -->
      <view class="table-header">
        <text class="table-title">{{ word }}</text>
        <view class="table-buttons">
          <button class="table-button">加入</button>
          <button class="table-button">打开</button>
        </view>
      </view>
      
      <!-- 卡片主体内容 -->
      <view class="table-body">
        <!-- 音标部分 -->
        <view class="phonetic-section">
          <view class="phonetic-item">
            <text class="flag">🇺🇸</text>
            <text class="phonetic">{{ usPhonetic }}</text>
          </view>
          <view class="phonetic-item">
            <text class="flag">🇬🇧</text>
            <text class="phonetic">{{ ukPhonetic }}</text>
          </view>
          <button class="pronunciation-button" @click.stop="playPronunciation">拼读发音</button>
        </view>
        
        <!-- 释义部分 -->
        <view class="explanation-section">
          <text class="explanation">{{ explanation }}</text>
        </view>
        
        <!-- 例句部分 -->
        <view class="example-section">
          <text class="example-label">例句</text>
          <text class="example">{{ example }}</text>
          <button class="collect-button" @click.stop="collectExample">收藏例句</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { voicePlay } from '@/tools/voice.js'; // 引入 voicePlay 函数

export default {
  props: {
    word: {
      type: String,
      default: ''
    },
    usPhonetic: {
      type: String,
      default: ''
    },
    ukPhonetic: {
      type: String,
      default: ''
    },
    explanation: {
      type: String,
      default: ''
    },
    example: {
      type: String,
      default: ''
    },
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    playPronunciation() {
      // 调用 voicePlay 函数播放发音
      voicePlay(this.word);
    },
    collectExample() {
      // 收藏例句的逻辑
      console.log('收藏例句');
    }
  }
};
</script>

<style scoped>
.word-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.word-detail-table {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.table-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.table-buttons {
  display: flex;
}

.table-button {
  margin-left: 10px;
  padding: 3px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 12px;
}

.table-body {
  margin-top: 10px;
}

.phonetic-section {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.phonetic-item {
  margin-right: 10px;
  font-size: 14px;
}

.flag {
  margin-right: 3px;
}

.phonetic {
  font-style: italic;
}

.pronunciation-button {
  margin-left: auto;
  padding: 3px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 12px;
}

.explanation-section {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.example-section {
  margin-top: 10px;
}

.example-label {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 12px;
  color: #666;
}

.example {
  font-size: 14px;
  margin-bottom: 5px;
}

.collect-button {
  padding: 3px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 12px;
  float: right;
}
</style>